<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
    <script src="./js/api.js"></script>
  </head>
  <body>
    <div id="send-div">
      <input type="text" name="" id="" />
      <input type="text" name="" id="" />
      <input type="text" name="" id="" />
      <input type="text" name="" id="" />
      <input type="button" name="" id="" value="发布" />
    </div>
    <ul>
      <!-- <li>
        <h2>小米</h2>
        <p></p>
        <img src="" alt="" />
      </li> -->
    </ul>
    <script>
      loadList();
      sendFN();

      // 3-删除功能
      // 调用删除接口 ，调用成功后-刷新页面或者 loadList
      async function delFn(pid) {
        console.log("delFn");
        //productDeleteAPI
        //
        let uid = localStorage.getItem("uid");
        let token = localStorage.getItem("token");
        console.log(pid);

        let params = { uid, token, pid };
        // 调用删除接口
        let { data } = await axios.get(productDeleteAPI, { params });
        console.log(data);
        //  删除成功以后  刷新列表
        loadList();
      }

      // 显示商品列表
      // 2-请求首页列表接口-》服务器返回的数据 -》 ul
      async function loadList() {
        // proudtListAPI
        //         参数
        // pagesize  每页获取几个数据
        // pagenum 获取第几页数据
        // uid  用户id
        let pagesize = 20;
        let pagenum = 0;
        let uid = localStorage.getItem("uid");
        let params = { pagenum, pagesize, uid };
        let { data } = await axios.get(proudtListAPI, { params });
        console.log(data);
        let productArr = data.data;
        console.log(productArr); //-> li
        let resArr = productArr.map(
          (pObj) => `
          <li>
            <h2>${pObj.pname}</h2>
            <p>${pObj.pprice}</p>
            <img src="${pObj.pimg}" alt="" />
            <button onclick="delFn(${pObj.pid})">删除</button>

            <a href="update.html?pid=${pObj.pid}">修改</a>

          </li>
        `
        );
        console.log(resArr);
        let ul = document.querySelector("ul");
        ul.innerHTML = resArr.join("");
      }

      // 发布功能
      // 1- 发布功能
      /*  给发布按钮添加点击事件，点击的时候获取输入框的值，调用发布接口 */
      function sendFN() {
        //
        // productAddAPI
        //         1.
        // pimg
        //     2.
        // pname
        //     3.
        // pprice
        //     4.
        // pdesc
        //     5.
        // uid  （可选）用户商品
        let ipts = document.querySelectorAll("#send-div input");
        ipts[4].onclick = async function () {
          let pname = ipts[0].value;
          let pprice = ipts[1].value;
          let pimg = ipts[2].value;
          let pdesc = ipts[3].value;
          let uid = localStorage.getItem("uid");
          let params = { pname, pprice, pimg, pdesc, uid };

          // axios.get(productAddAPI, { params }).then((res) => {
          //   let { data } = res;
          //   console.log(data);
          //   alert(data.msg);
          // });

          // get 方法 返回的是一个promise 对象
          // let p = axios.get(productAddAPI, { params });
          // console.log(p);
          // let res = await p;
          // console.log(res.data);

          // try catch  尝试执行try里的代码，一旦报错 就执行catch
          // try {
          //   let { data } = await axios.get(productAddAPI, { params });
          //   console.log(data);
          // } catch (error) {
          //   console.log(error);
          // }

          let { data } = await axios.get(productAddAPI, { params });
          //发布成功以后调用loadlist
          loadList();
        };
      }
    </script>
  </body>
</html>
